<template>
  <div class="c-group">
    <el-tabs v-model="getActive" :active-name="getActive" @tab-click="handleClick">
      <el-tab-pane v-for="tabPane in getTabPanes" :label="tabPane.name" :name="tabPane.type">
        <div slot="label" v-if="tabPane.type === 'webchat_laterProcess'" style="position: relative;">
          {{tabPane.name}}
          <!--稍后处理的新手引导提示组件-->
          <popover-novice
            style="position: absolute;right: -25px;top: 15px;"
            v-if="!getNoviceKeyStatus.tabType_webchat_laterProcess"
            noviceKey = 'tabType_webchat_laterProcess'
            :noviceHtml = "{title: '', text: $t('public.tabType_Webchat_laterProcess')}"
            @updateGuidanceSuccess="updateGuidanceSuccess"
          ></popover-novice>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="card-content__wapper" :class="{tabheight: getActive === 'cdr_call' || getActive === 'cdr_outbound' || getActive === 'webchat_todo' || getActive === 'email_todo'}">
      <slot :name="'search'"></slot>
      <div class="card-list-loading" v-show="cardLoading" v-loading="cardLoading" :element-loading-text="$t('public.loadingText')"></div>
      <div class="card-list" v-show="!cardLoading">
        <slot :name="'cardList'"></slot>
      </div>
    </div>
    <div>
      <slot name="pagination"></slot>
    </div>
  </div>
</template>
<script>
  import { addZhuGeTrack } from '@/utils/addZhuGeTrack.js'
  import popoverNovice from '@/components/public-modules/novice-boot/popoverNovice.vue'
  export default {
    name: 'CardGroup',
    data () {
      return {
        getActive: this.activeName,
        getTabPanes: [],
        getNoviceKeyStatus: {}   // 新手引导的展示状态
      }
    },
    props: {
      tabPanes: Array, // 对应业务模块的卡片 tab
      activeName: String, // 默认点击 tab
      cardLoading: Boolean
    },
    components: {
      popoverNovice
    },
    watch: {
      activeName (cur, old) {
        this.getActive = cur
      },
      tabPanes (cur, old) {
        this.$set(this, 'getTabPanes', cur)
      }
    },
    methods: {
      // 更新新手引导展示状态
      updateGuidanceSuccess (status) {
        let guidance = this.$getCache('guidance')
        this.getNoviceKeyStatus = guidance || {'tabType_webchat_laterProcess': true} // 服务不对，或者是没有这个对象时，默认不显示。webchatSessionLocking为气泡的key
      },
      handleClick (tab, event) {
        addZhuGeTrack(tab.name)
        let paths = this.$route.path.split('/')
        this.$router.push(`/index/${paths[2]}`)
        this.$emit('handleClick', tab.name)
      }
    },
    beforeMount () {
      this.updateGuidanceSuccess()
      this.getActive = this.activeName
      this.$set(this, 'getTabPanes', this.tabPanes)
    }
  }
</script>
<style lang="stylus" scoped>
@import "../../../assets/common"
.c-group
  position relative
  .card-content__wapper
    display flex
    flex-flow column
    background #fafafa
    height calc(100vh - 128px)
  .card-list-loading
    flex 1
    background $cf-white
  .card-list
    flex 1
    overflow auto
    background $cf-white
  .tabheight
    height calc(100vh - 94px)
</style>
